<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>第四节课</title>
		<style type="text/css">
			/*去除原来样式*/
			
			* {
				padding: 0;
				margin: 0;
			}
			
			.container {
				width: 100vw;
				height: 100vh;
				display: flex;
				/*
				 * 将边框设置在中间
				 */
				align-items: center;
				justify-content: center;
			}
			
			canvas {
				width: 500px;
				height: 500px;
				border: 1px solid #333333;
			}
		</style>
	</head>

	<body>
		<!--<img id="img" src="cut.jpeg" alt="" />-->
		<div class="container">
			<canvas id="canvas" width="500" height="500"></canvas>
		</div>
	</body>

	<script>
		
		window.onload = function(){
			
			let oCanvas = document.getElementById("canvas");
			let pen = oCanvas.getContext("2d");
			
			//let oimg = document.getElementById("img");
			//console.dir(oimg);
			
			//图片的对象，图片左上角对应的坐标
			//pen.drawImage(oimg,10,10);
			
			//隐藏对象
			//oimg.style.display = "none";
			
			let oimg2 = new Image();
			oimg2.src = "img.png";
			oimg2.onload = function(){
				
				pen.font = "bold 240px 潮字社凌渡鲲鹏简";
				
				let myPattern = pen.createPattern(oimg2,"repeat");
				pen.fillStyle = myPattern;
				pen.fillText("你好",0,200);
				pen.fillText("世界！",0,450);
				
				
				//pen.drawImage(oimg2,0,0,373,400);
				
				//被截取对象、被截取图片横坐标、被截取图片的纵坐标、被截取图片宽度、被截取图片高度、左上角x、左上角y、w、h
				//pen.drawImage(oimg2,0,230,60,110,0,225,60,110);
				
				//img、"repeat、repeat-x、repeat-y、no-repeat"
				//createPattern()
//				let myPattern = pen.createPattern(oimg2,"no-repeat");
//				pen.fillStyle = myPattern;
//				pen.fillRect(0,0,500,500);
				
				//let Canvas = new Canvas();
				
				/*let repeatCanvas = document.createElement("canvas");
				repeatCanvas.width = 30;
				repeatCanvas.height = 30;
				let repeatPen = repeatCanvas.getContext("2d");
				//repeatPen.arc(15,15,15,0,Math.PI/180*360,true);
				
				repeatPen.fillStyle = "coral";
				//repeatPen.fillRect(5,5,15,15);
				repeatPen.fill();
				let myPattern = pen.createPattern(repeatCanvas,"repeat");
				pen.fillStyle = myPattern;
				pen.fillRect(0,0,500,500);*/
				
				
			};
			
			
			
		};
		
		
	</script>

</html>